<template>
  <div class="home-container">
      <el-row class="content-main">
          <el-col :span="16">
            <div id="dplayer"></div>
            <div class="mediainfo_main">
              <el-row>
                <el-col :span="6">
                  <el-image :src="cover"
                            style="max-width: 160px;width: 100%;border-radius: 5px;"></el-image>
                </el-col>
                <el-col :span="18" style="padding-left: 5px" class="text-center">
                  <a href="#"><h3>{{title}}</h3></a>
                  <p>392.1万播放  ·  1.3万弹幕  ·  270.8万系列追番</p>
                  <p><span v-for="time in csops" key="time">{{time}} /</span> · {{viodtime}} · {{paybar}}, {{gxtime}} 更新 · {{pyId}}</p>
                  <p>声优：<span v-for="time in dplayer" key="time">{{time}} | </span></p>
                  <p>简介：{{putext}}</p>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8" style="padding-left: 20px">
                  <div class="paybar">
                      <p>欢迎月月会员用户 ></p>
                  </div>
                  <div class="dmlist">
                    <p>公告：请勿相信视频广告！</p>
                  </div>
              <div class="eplist_ep_list">
                  <div class="eplist_list_title">
                      <div>正片<span>({{selectedId}}/{{urls.length}})</span></div>
                      <div><el-icon size="16"><Fold /></el-icon></div>
                  </div>
                  <div class="SectionSelector">
                      <span>TV</span>
                  </div>
                  <div class="numberList_wrapper">
                      <a class="a_item" v-for="time in urls" key="time.id"
                         href="#" @click="qh(time.id,urls)"
                         :class="{ a_item_acter: selectedId === time.id }"
                      >{{time.id}}</a>
                  </div>
              </div>
          </el-col>
      </el-row>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import {useRoute} from "vue-router";
import {GetVidoe} from '@/api/vidoe.js'
import {ElMessage} from "element-plus";

// 导入DPlayer
import'@/assets/js/DPlayer.min.js';
import '@/assets/js/flv.min.js';
import '@/assets/js/hls.min.js';
import '@/assets/js/webtorrent.min.js';

const  router = useRoute()

//视频id
const pyId = ref(router.params.pyid);

const selectedId = ref(1)

const refops = async () => {
  const res = await GetVidoe(pyId.value)
  if(res.code == 1) {
    ElMessage.error(res.msg)
  }
  csops.value = Object.values(res.data[0].vidoetype)
  urls.value = res.data[0].vidoeUrl
  viodtime.value = res.data[0].time
  gxtime.value = res.data[0].gxtime
  paybar.value = res.data[0].status
  dplayer.value = Object.values(res.data[0].vspan)
  putext.value = res.data[0].Vopsd
  title.value = res.data[0].title
  cover.value = res.data[0].cover
  DPlayerVido(res.data[0].vidoeUrl[0].url,res.data[0].type)
}
refops()

//标题
const title = ref('')
//封面图片
const cover = ref('')
// 剧集地址
const urls = ref([])
//标签
const csops = ref()
//年份
const viodtime = ref("2021")
//更新时间
const gxtime = ref("每周二 09:00")
//更新状态
const paybar = ref("连载中")
//声优
const dplayer = ref([])
//简介
const putext = ref("")
// 弹幕地址
const apiurl = '/api';
let dp;

const DPlayerVido = (url,type) => {
  let dpRef = ref(document.getElementById('dplayer'))
  dp = new DPlayer({
    container: dpRef.value,
    preload: 'none',
    lang: 'zh-cn',
    video: {
      quality: [
          {
            name: '1080',
            url: url,
            type: type,
          }
      ],
      defaultQuality: 0,
    },
    danmaku: {
      id: pyId.value,
      api: apiurl,
    }
  });
};

const qh = (id,urls) => {
  selectedId.value = id
  for (let i = 0; i < urls.length; i++) {
    if (urls[i].id == id) {
      dp.switchVideo({ url: urls[i].url }, { id: 'test', api: apiurl });
    }
  }
}
</script>

<style scoped slot="scss">
    .home-container{
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none; /* Standard syntax */
      padding: 5px 10%;
      height: 100vh;
      background-image: linear-gradient(
          to right, rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0)
      ),
      url("http://localhost:1207/images/wzbj.jpg");
      background-size: cover; /* 背景图片铺满整个容器 */
      background-position: center; /* 背景图片居中显示 */
      background-repeat: no-repeat; /* 背景图片不重复 */
    }
    .content-main{
      padding: 10px;
      background: rgb(241, 242, 243,0.8);
      border-radius: 15px;
    }
    .paybar{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        background-color: rgb(251, 114, 153);
        color: rgb(255, 255, 255);
        border-radius: 30px;
        font-size: 14px;
    }
    .dmlist{
      margin-top: 25px;
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
      background-color:rgb(241, 242, 243) ;
    }
    .eplist_ep_list{
        padding: 15px;
        height: 160px;
        background-color:rgb(241, 242, 243) ;
        margin-top: 25px;
        border-radius: 10px;
    }
    .eplist_list_title{
        font-size: 14px;
        display: flex;
        justify-content: space-between
    }
    .SectionSelector{
        margin-top: 25px;
    }
    .SectionSelector span{
        padding: 7px 12px;
        font-size: 14px;
        background-color: rgba(0, 174, 236, 0.1);
    }
    #dplayer{
      margin-bottom: 25px;
      border-radius: 5px;
    }
    a{
      text-decoration: none;
      color: black;
    }
    .numberList_wrapper{
        margin-top: 25px;
    }
    .a_item{
      margin-right: 8px;
        padding: 10px 15px;
        font-size: 16px;
        font-weight:400;
      border-radius: 8px;
      background-color: white;
    }
    .text-center{
      p{
        margin-top: 5px;
        font-size: 12px;
        color:rgb(97, 102, 109);
      }
    }
    .a_item_acter{
        color: white;
        background-color: cornflowerblue;
    }
    .a_item:hover{
        color: white;
        background-color: royalblue;
    }
</style>